.box {
  width: 100vw;
  height: 100vh;
  background-image: url(../../assets/image/bg-day.png);
  background-size: 100% 100%;
  button {
    background-color: aquamarine;
  }
  .top {
    width: 100vw;
    height: 7%;
    background-image: url(../../assets/image/ceil.png);
    background-size: 100% 100%;
  }
  .zhongjian {
    width: 100vw;
    height: 86%;
    display: flex;
    .imagesshang {
      width: 50%;
      height: 100%;
      .buanjian {
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        align-items: flex-end;
        .aiz {
          display: flex;
        }
        .tou {
          display: flex;
          .soanaln {
            background-color: antiquewhite;
            border-radius: 25px;
            display: flex;
            align-items: center;
          }
          .niaoling {
            width: 50px;
            height: 50px;
            background-image: url(../../assets/image/notice.gif);
            background-size: 100% 100%;
            border-radius: 50%;
          }
        }
      }
      .images {
        width: 100%;
        height: 55%;
        background-image: url(../../assets/image/border.png);
        background-size: 100% 100%;
        position: relative; /* 确保子元素的绝对定位相对于这个容器 */
        .input-container {
          display: none;
        }
      }
      .images:hover {
        .input-container {
          display: block;
        }
      }
      .images .video {
        width: 90%;
        height: 75%;
        margin: 5% 0 0 5%;
      }
      .images .inputs {
        width: 75%;
        height: 30px;
        margin: 0 0 0 5%;
      }
      .images .zhezhao {
        width: 97%;
        height: 15%;
        position: absolute;
        top: 20%;
        /* 框外隐藏数据 */
        overflow: hidden;
      }
    }
  }
  .dibu {
    width: 100vw;
    height: 7%;
    background-image: url(../../assets/image/floor.png);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    .yvyin {
      width: 100px;
      height: 100px;
      background-image: url(../../assets/image/speeching.gif);
      background-size: 100% 100%;
      border-radius: 50%;
      margin: -40px 0 0px 0;
    }
  }
}
.images .zhezhao .danmu {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  padding: 5px 10px;
  /* background-color: rgba(0, 0, 0, 0.5); */
  color: white;
  font-size: 30px;
  border-radius: 5px;
  animation: moveLeft 10s linear infinite; /* 增加持续时间，使用 forwards 保持动画结束后的状态 */
}
@keyframes moveLeft {
  /* 不断循环 */
  0% {
    left: 100%; /* 从容器外开始 */
  }
  100% {
    left: -100%; /* 移动到容器外 */
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;
